<template>
	<view :class="themeName">
		<view class="flex heads">
			<view @click="choose('day')" class="h1" :class="{ h2: type == 'day' }">当日</view>
			<view @click="choose('week')" class="h1" :class="{ h2: type == 'week' }">一周</view>
			<view @click="choose('month')" class="h1" :class="{ h2: type == 'month' }">
				<text class="m-r-12">{{ time }}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<u-picker v-model="show" :confirm-color="themeColor" cancel-color="#999" mode="time2" @confirm="regionChange"></u-picker>
		<view class="serve-nav flex flex-wrap">
			<view class="nav-item flex-col col-center" v-for="(item, index) in lists" :key="index">
				<u-image width="60rpx" height="60rpx" :src="item.icon" />
				<view class="xs m-t-12 black md">{{ item.title }}</view>
				<view>
					<text style="color: #0980cc">{{item.num}}</text>
					<text v-if="item.title == '订单总数'">单</text>
					<text v-else>元</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { tongji } from '@/api/others';
export default {
	data() {
		return {
			lists: [
				{
					title: '订单总数',
					num:0,
					icon: '/others/static/a15.png'
				},
				{
					title: '订单总金额',
					num:0,
					icon: '/others/static/a16.png'
				},
				{
					title: '分佣总金额',
					num:0,
					icon: '/others/static/a17.png'
				},
				{
					title: '门店总收益',
					num:0,
					icon: '/others/static/a19.png'
				}
			],
			type: 'month', //day 当日   week 一周  month 年月
			show: false,
			time: '',
			
			detatime:'',
		};
	},
	onLoad() {
		this.gettime();
	},
	methods: {
		getmsg(){
			tongji({
				type:this.type,
				time:this.time
			}).then(res => {
				this.lists[0].num = res.order_count;
				this.lists[1].num = res.order_price;
				this.lists[2].num = res.fenyong_price;
				this.lists[3].num = res.mendian_price;
			});
		},
		gettime() {
			let today = new Date();
			let year = today.getFullYear();
			let month = today.getMonth() + 1;
			if (month < 10) {
				month = '0' + String(month);
			}
			// console.log(year,month);
			this.detatime = year + '-' + Number(month);
			this.time = year + '-' + Number(month);
			this.getmsg();
		},
		choose(str) {
			if (str == 'month') {
				this.show = true;
			} else {
				// this.time = this.detatime;
				this.type = str;
				this.getmsg();
			}
		},
		regionChange(e) {
			// console.log(e.year);
			// console.log(e.month);
			this.type = 'month';
			this.time = e.year + '-' + e.month;
			this.getmsg();
		},
		
	}
};
</script>

<style lang="scss" scoped>
.heads {
	padding: 20rpx;
	.h1 {
		background-color: #fff;
		padding: 0rpx 30rpx;
		border-radius: 15rpx;
		margin-right: 30rpx;
		border: 1px solid #eee;
		height: 67rpx;
		line-height: 67rpx;
	}
	.h2 {
		border: 1px solid #0980cc;
	}
}
.serve-nav {
	padding: 30rpx 0;
	background-color: #fff;
	margin: 20rpx;

	.nav-item {
		width: 50%;
		margin: 30rpx 0;
	}
}
</style>
